<template>
  <div v-loading="lad" style="width:100%;height:100%;">
    <el-container v-if="el_co" class="layout-container-demo" style="height: 100%">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu>
            <el-menu-item style="height: 200px;border-bottom: 1px solid #cbe0ff;background-color: aliceblue;">
              <div style="width: 100%;height: 100%;margin-top: 40px;margin-left: 30px;">
                <div style="width: 100px;height: 100px;border-radius: 60px;overflow: hidden;"><img :src="url" alt="1"
                                                                                                   width="100%"
                                                                                                   height="100%"></div>
                <div style="margin-left: 35px;">{{ email }}</div>
                <div @click="ext" style="    position: relative;
    bottom: 25px;
    left: 18px;">退出登录
                </div>
              </div>

            </el-menu-item>
            <el-menu-item index="admin" class="b" @click="yhClik()">
              <el-icon>
                <Avatar />
              </el-icon>
              <span>用户管理</span>
            </el-menu-item>
            <el-menu-item index="2" class="b" @click="dyClik()">
              <el-icon>
                <Film />
              </el-icon>
              <span>电影管理</span>
            </el-menu-item>
            <el-menu-item index="3" class="b" @click="jbClik()">
              <el-icon>
                <WarnTriangleFilled />
              </el-icon>
              <span>举报管理</span>
            </el-menu-item>
          </el-menu>

        </el-scrollbar>
      </el-aside>

      <el-container>
        <el-header style="font-size: 12px;background-color: #dcebff">
          <div style="    margin-top: 10px;
    font-size: 20px;">电影评论系统后台管理
          </div>
        </el-header>

        <el-main>
          <user-icon v-if="yhgl" />
          <file-icon v-if="dygl" />
          <report-icon v-if="jbgl" />
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>
import { Avatar, Film, Search, WarnTriangleFilled } from '@element-plus/icons-vue'
import axios from 'axios'

import FileIcon from '@/components/ico/admon/fileIcon.vue'
import UserIcon from '@/components/ico/admon/userIcon.vue'
import ReportIcon from '@/components/ico/admon/reportIcon.vue'

export default {
  computed: {
    Search() {
      return Search
    }
  },
  components: { ReportIcon, UserIcon, FileIcon, Avatar, Film, WarnTriangleFilled },

  data() {
    return {
      lad: true,
      el_co: false,
      url: '',
      email: '',
      yhgl: true,
      dygl: false,
      jbgl: false,
      tableData_dy: [],
      tableData_jb: []
    }
  },
  methods: {
    ext() {
      localStorage.removeItem('token')
      localStorage.removeItem('user')
      location.reload()
      window.open('/login', '_self')
    },

    yhClik() {
      this.yhgl = true
      this.dygl = false
      this.jbgl = false
    },
    dyClik() {
      this.yhgl = false
      this.dygl = true
      this.jbgl = false

    },
    jbClik() {
      this.yhgl = false
      this.dygl = false
      this.jbgl = true

    }

  },
  mounted() {

    axios.get('/api/user/getName', {
      headers: {
        Authorization: localStorage.getItem('token')
      }
    }).then((res) => {
      this.url = res.data.img
      this.email = res.data.user
    })
    setTimeout(() => {
      this.el_co = true
      this.lad = false
    }, 1000)
  }
}


</script>

<style scoped>

.el-menu-item {
  background-color: aliceblue;
}

.b:hover {
  background-color: #a6d7ff;
}

.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}


/deep/ .el-table__body:hover {
  overflow: hidden;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}

.el-scrollbar {
  background-color: aliceblue;

}

.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 7px;
  height: 2px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
  border-radius: 10px;
  background-color: rgba(245, 245, 245, 0);
}

/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 8px;
  -webkit-box-shadow: inset 0 0 6px rgba(159, 159, 159, 0.3);
  background-color: #818181;
}

</style>
